
<template>
    <div class="big_div">
        <div class="top-bar">
            <div class="admin-info">
                尊敬的{{ adminName }}管理员您好
            </div>
            <p class="title_font">智能交互问答平台</p>
            <el-button ><router-link :to="'/adminView/' ">返回</router-link></el-button>
        </div>
        <div class="content">
            <div class="sidebar">
                <ul>
                    <h2>学生信息</h2>
                    <li @click="selectNavItem(1)" :class="{ active: selectedNavItem === 1 }">学生详细信息</li>
                    <li @click="selectNavItem(2)" :class="{ active: selectedNavItem === 2 }">加入的课堂</li>
                </ul>
            </div>
            <div class="main">
                <div v-if="selectedNavItem === 1">
                    <!-- <h1>学生详细信息</h1> -->
                    <el-descriptions class="margin-top" title="学生详细信息" :column="1" style="width:60%" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    姓名
                                </div>
                            </template>
                            {{ detailStudent.name }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    学号
                                </div>
                            </template>
                            {{ studentID }}
                        </el-descriptions-item>
                        <!-- <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                班级
                            </div>
                        </template>
                        {{ Suzhou }}
                    </el-descriptions-item> -->
                        <!-- <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                登录密码
                            </div>
                        </template>
                    </el-descriptions-item> -->
                    </el-descriptions>
                </div>
                <div v-if="selectedNavItem === 2">
                    <p>{{ detailStudent.name }}学生加入的课堂:</p>
                    <div v-if="attendList.length === 0">
                        <p style="background-color: darkgray;width: fit-content;height: fit-content;">该学生还未加入过课堂</p>
                    </div>
                    <div v-else>
                        <el-main class="card-container">
                            <el-card class="custom-card" v-for="(item, index) in attendList" :key="index"
                                :style="{ maxWidth: '400px', minWidth: '400px', height: '250px' }">
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ item.className }} &nbsp;&nbsp;课程ID :{{ item.classID }}</span>
                                    </div>
                                </template>
                                <div>课堂：{{ item.courseID }}</div>
                                <div>课堂名称：{{ item.courseName }}</div>
                                <div>授课教师：{{ item.name }}</div>
                                <div>授课教师ID：{{ item.teacherID }}</div>
                                <el-button type="primary" style="width:auto" @click="removeClass(item)">将学生移出课堂</el-button>
                            </el-card>
                        </el-main>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElNotification, ElButton } from 'element-plus';
import { allClassInfoService, removeStudentFromCourse } from '@/api/adminApi/allAdmin'
// import {} from ''
import { useStore } from '../store';
import { useRoute } from 'vue-router';
// 获取路由参数中的 studentID
const router = useRoute();
const studentID = ref(null);
onMounted(() => {
    studentID.value = router.params.id;
    // 在这里可以根据 teacherID 进行一些操作，比如发送请求获取详细信息
});
const store = useStore()
const attendList = ref(store.attendClassOfStu)
const detailStudent = ref(store.detailStudent)
console.log(detailStudent.value, 'attendList')
watch(
    () => store.attendClassOfStu,
    () => attendList.value = store.attendClassOfStu
    , {
        deep: true
    })
const selectedNavItem = ref(1);
const selectNavItem = (navItemIndex) => {
    selectedNavItem.value = navItemIndex;
    console.log(attendList.value, 'table')
};
const removeClass = async (item) => {
    const index = attendList.value.findIndex(p => p.className === item.className);
    if (index !== -1) {
        const data = {
            classID: item.classID,
            studentID: studentID.value
        }
        await removeStudentFromCourse(data)
        attendList.value.splice(index, 1);
        ElNotification({
            title: '成功',
            message: '删除成功',
            type: 'success'
        });
    }
};
</script>
<style scoped>
.big_div {
    display: flex;
    /* 使用 Flexbox 布局 */
    background-color: #f7f9fc;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title_font {
    color: #f5f5f5;
    font-size: 40px;
    display: inline-block;
    margin-left: 40%;
    /* text-align: center; */
    position: absolute;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    width: 100%;
    background-color: #0997F7;
    color: #f5f5f5;
    font-size: large;
    height: 80px
}

.sidebar {
    position: flex;
    background-color: #fff;
    width: 12%;
    /* height: 10000px; */
    height: 100vh;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    overflow-y: auto;
}

.content {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.main {
    flex: 1;
    height: 100vh;
    /* 调整为占满整个视口的高度 */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    margin-left: 20px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}

.sidebar ul li {
    font-size: 16px;
    line-height: 2.5;
    padding-left: 20px;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

.sidebar ul li:hover {
    background-color: #f7f9fc;
}

.cell-item {
    width: 40%;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素在需要时换行 */
    justify-content: flex-start;
    /* 子元素从容器起始位置开始排列 */
    gap: 40px;

    /* 调整间隔大小 */
    .custom-card {
        border-radius: 15px;
        /* 圆润的边角 */
        overflow: hidden;
        /* 防止内容溢出边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 添加阴影效果 */
        width: 400px;
        height: 200px;
        /* 调整卡片宽度 */
    }
}
</style>
